<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">


    <title>武侯祠管理系统</title>
    
   
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>

    <style type="text/css">
        .contain{
            width: 80%;
            margin-right: 9%;
            margin-left: 9%;

        }
        .myNav{
            margin-bottom: 20px;
        }
        .aColor{
            color: black;
        }
        .myModal{
            width: 90%;
            margin-left: 20px;
            margin-right: 20px;
        }
        #modal1{
            min-height: 520px;
        }
        #myTable{
            padding:20px;
        }
    </style>


   
</head>

<body class = " light-green lighten-4">
   

   

    <nav class="myNav">
      <div class="nav-wrapper light-green darken-4">
        <a href="" class="brand-logo">&nbsp武侯祠管理系统</a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
          <li><a href="./main2.html">主页</a></li>
          <li><a href="./spot.html">景点</a></li>
          <li><a href="./food.html">美食</a></li>
          <li><a href="./toilet.html">厕所</a></li>
          <li><a href="./news.html">新闻</a></li>
          <li><a href="./broadcast.html">广播</a></li>
          <li><a href="./feedback.html">反馈</a></li>
          <li><a href="./password.html">设置</a></li>
        </ul>
      </div>
    </nav>

    <div class="contain" >
        <div class="card  light-green lighten-5" id="myTable">
        <div class="row">
            <h3 class="col s10 offset-s1 center-align">武侯祠今日新闻</h3>
            <a class="waves-effect waves-teal btn-flat light-green modal-trigger" 
                style="color:white;margin-top:2.3rem;margin-left:-7%" href="#modal200">添加</a>
        </div>
        <table class="highlight responsive-table" id="tcontent">
            <thead>
                <tr>
                    <th data-field="title">标题</th>
                    <th data-field="author">作者</th>
                    <th data-field="date">日期</th>
                </tr>
            </thead>
            <tbody id="tableBody">                               
            </tbody>
        </table>
        <div class="center-align">
        <ul class="pagination">
            <li id="prev" class="disabled"><a href="#!"><i class="material-icons"><</i></a></li>
            <li id="next" class="waves-effect"><a href="#!"><i class="material-icons">></i></a></li>
        </ul>
        </div>
        </div>

    </div>



<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script src="js/main.js"></script>
<script>
    var lut = []; for (var i=0; i<256; i++) { lut[i] = (i<16?'0':'')+(i).toString(16); }
    var numT =200;
    var titleT="请输入新闻标题";
    var nameT = "请输入作者姓名";
    $('#myTable').append("<div id='modal"+numT+"' class='modal'>"+
        "<div class='modal-content myModal'>"+
        "<form><div class='row'>"+
        "<div class='input-field'>"+
        "<input value="+titleT+" id='mTitle"+numT+"' type='text' class='validate'></div>"+
        "<div class='input-field'>"+
        "<input value="+nameT+" id='mAuthor"+numT+"' type='text' class='validate'></div>"+
        "<div class='input-field'>"+
        "<textarea id='mContent"+numT+"' class='materialize-textarea'></textarea>"+
        "<label for='mContent"+numT+"'>内容</label>"+
        "</div></form>"+
        "<div class='modal-footer'>"+
        "<a href='#!' class='modal-action modal-close waves-effect waves-red btn-flat'>取消</a>"+
        "<a href='#!' class='modal-action modal-close waves-effect waves-green btn-flat' onclick='add()'>保存</a>"+
        "</div></div>"
        );     
    var current_page = 0;
    var deviceID = getUUID();
    $(document).ready(function(){
        
        // generateUUID();


        getNewsList(0,15);
        
        $("#prev").click(function () {
            if (current_page==0) {
                $(this).addClass("disabled");
                // alert("已经是第一页")
            }else{
                prev_page()
            }
        })

        $("#next").click(function () {
            $("#prev").removeClass("disabled");
            next_page()
        })

    });
    function next_page () {
        current_page++;
        getNewsList(current_page*15,15)
    }

    function prev_page () {
        current_page--;
        getNewsList(current_page*15,15);
    }

    function getNewsList(start,num) {
        var settings = {
            type: "POST",
            url: "http://192.168.21.14:8000/info/get_news_list",
            dataType: "json",
            data:{
                device_id:deviceID,
                start:start,
                num:num
            },
            success: function(data,textStatus) {
                // alert("success");
                $("#tableBody").html("");
                for(var i =0; i<data.length; i++){
                    var timestamp = data[i].date;
                    var newDate = new Date();
                    newDate.setTime(timestamp * 1000);
                    var date =  newDate.toLocaleDateString();

                    var title = data[i].title;
                    var name = data[i].author;                   
                    var num = data[i].id;
                    var content = data[i].content;

                    addNewRow(num,title,name,date);

                    $('#myTable').append("<div id='modal"+num+"' class='modal'>"+
                        "<div class='modal-content myModal'>"+
                        "<form><div class='row'>"+
                        "<div class='input-field'>"+
                        "<input value="+title+" id='mTitle"+num+"' type='text' class='validate'></div>"+
                        "<div class='input-field'>"+
                        "<input value="+name+" id='mAuthor"+num+"' type='text' class='validate'></div>"+
                        "<div class='input-field'>"+
                        "<textarea id='mContent"+num+"' class='materialize-textarea'>"+content+"</textarea>"+
                        "<label id=mCon"+num+" for='mContent"+num+"'>内容</label>"+
                        "</div></form>"+
                        "<div class='modal-footer'>"+
                        "<a href='#!' class='modal-action modal-close waves-effect waves-red btn-flat'>取消</a>"+
                        "<a href='#!' class='modal-action modal-close waves-effect waves-red btn-flat' onclick='tdelete("+num+")'>删除</a>"+
                        "<a href='#!' class='modal-action modal-close waves-effect waves-green btn-flat' onclick='save("+num+")'>保存</a>"+
                        "</div></div>"
                        );
                }
                $('.modal-trigger').leanModal();
               
            },
            error: function(XHR, textStatus, errorThrown) {
                alert("网络错误" + JSON.stringify(XHR));
            },
        };
        $.ajax(settings);
    }

    function getDetail(num){
        var nid = num;
        // console.log(nid);       
        var settings = {
            type: "POST",
            url: "http://192.168.21.14:8000/info/get_news",
            dataType: "json",
            data:{
                id:nid
            },
            success: function(data,textStatus) {
                alert("detail success");

                $('#mTitle'+num).val(data.title);
                $('#mAuthor'+num).val(data.author);
                $('#mContent'+num).val(data.content);
                $('#mDate'+num).val(data.date);
                $('#mCon'+num).addClass( "active" );


            },
            error: function(XHR, textStatus, errorThrown) {
                alert("网络错误" + XHR);
            },
        };
        $.ajax(settings);        
    }

    function add(){      
        var title = $('#mTitle200').val();
        var name = $('#mAuthor200').val();
        var content = $('#mContent200').val();

        var settings = {
            type: "POST",
            url: "http://192.168.21.14:8000/admin/post_news",
            dataType: "json",
            data:{
                title:title,
                author:name,
                content:content
            },
            success: function(data,textStatus) {
                var num = data.news.id;
                title = data.news.title;
                name = data.news.author;
                var timestamp = data.news.date;
                var newDate = new Date();
                newDate.setTime(timestamp * 1000);
                var date =  newDate.toLocaleDateString();
                var content = data.news.content;
                preAddNewRow(num,title,name,date);
                // $('#tcontent').append("<tr><td><a class='modal-trigger aColor' href='#modal"+num+"'>"
                    // +title+"</a></td><td>"+name+"</td><td>"+date+"</td></tr>");                
                $('#myTable').append("<div id='modal"+num+"' class='modal'>"+
                    "<div class='modal-content myModal'>"+
                    "<form><div class='row'>"+
                    "<div class='input-field'>"+
                    "<input value="+title+" id='mTitle"+num+"' type='text' class='validate'></div>"+
                    "<div class='input-field'>"+
                    "<input value="+name+" id='mAuthor"+num+"' type='text' class='validate'></div>"+
                    "<div class='input-field'>"+
                    "<textarea id='mContent"+num+"' class='materialize-textarea'>"+content+"</textarea>"+
                    "<label id=mCon"+num+" for='mContent"+num+"'>内容</label>"+
                    "</div></form>"+
                    "<div class='modal-footer'>"+
                    "<a href='#!' class='modal-action modal-close waves-effect waves-red btn-flat'>取消</a>"+
                    "<a href='#!' class='modal-action modal-close waves-effect waves-red btn-flat onclick='tdelete("+num+")'>删除</a>"+
                    "<a href='#!' class='modal-action modal-close waves-effect waves-green btn-flat' onclick='save("+num+")'>保存</a>"+
                    "</div></div></div>"
                    );
                $('.modal-trigger').leanModal();

            },
            error: function(XHR, textStatus, errorThrown) {
                alert("网络错误" + XHR);
            },
        };
        $.ajax(settings);
    }

    function tdelete(num){  
        var settings = {
            type: "POST",
            url: "http://192.168.21.14:8000/admin/delete_news",
            dataType: "json",
            data:{
                id:num
            },
            success: function(data,textStatus) {
                $('#row'+num).remove();
            },
            error: function(XHR, textStatus, errorThrown) {
                alert("网络错误" + XHR);
            },
        };
        $.ajax(settings);

    }

    function save(num){

        var title = $('#mTitle'+num).val();
        var name = $('#mAuthor'+num).val();
        var content = $('#mContent'+num).val();
        console.log(title);
        console.log(name);
        console.log(content);

         
        var settings = {
            type: "POST",
            url: "http://192.168.21.14:8000/admin/update_news",
            dataType: "json",
            data:{
                id:num,
                title:title,
                author:name,
                content:content
            },
            success: function(data,textStatus) {
                alert("save");
                $('#tName'+num).text(name);
                $('#tTitle'+num).text(title);                
            },
            error: function(XHR, textStatus, errorThrown) {
                alert("网络错误" + XHR);
            },
        };
        $.ajax(settings);          
    }

    function addNewRow(num,title,name,date){
        $('#tcontent').append("<tr id=row"+num+"><td><a class='modal-trigger aColor' onclick='getDetail("+num+")' href='#modal"+num+"'>"+
            title+"</a></td><td>"+name+"</td><td>"+date+"</td></tr>");        
    }
    function preAddNewRow(num,title,name,date){
        $('#tableBody').prepend("<tr id=row"+num+"><td><a class='modal-trigger aColor' onclick='getDetail("+num+")' href='#modal"+num+"'>"+
            title+"</a></td><td>"+name+"</td><td>"+date+"</td></tr>");        
    }
    function getUUID() {
    var uuid = getCookie("device_id");
    if (!uuid) {
        uuid = generateUUID();
        setCookie("device_id",uuid,1);
    }
    return uuid;
    }
    
    function generateUUID(){
        var d0 = Math.random()*0xffffffff|0;
        var d1 = Math.random()*0xffffffff|0;
        var d2 = Math.random()*0xffffffff|0;
        var d3 = Math.random()*0xffffffff|0;
        
        return lut[d0&0xff]+lut[d0>>8&0xff]+lut[d0>>16&0xff]+lut[d0>>24&0xff]+'-'+
        lut[d1&0xff]+lut[d1>>8&0xff]+'-'+lut[d1>>16&0x0f|0x40]+lut[d1>>24&0xff]+'-'+
        lut[d2&0x3f|0x80]+lut[d2>>8&0xff]+'-'+lut[d2>>16&0xff]+lut[d2>>24&0xff]+
        lut[d3&0xff]+lut[d3>>8&0xff]+lut[d3>>16&0xff]+lut[d3>>24&0xff];
    }

</script>

</body>
</html>